<template>
  <div class="box">
    <div class="title">
      <div class="titleText">我的</div>
      <div class="userInfo">
        <div class="face">
          <van-uploader :after-read="afterRead">
            <img
              :src="imgUrl + info.data.avatar"
              width="70"
              height="70"
              alt=""
              style="border-radius: 50%"
            />
          </van-uploader>

          <img
            v-if="Number(info.data.auth) === 1"
            class="attestation"
            src="@/assets/image/attestation1.png"
            alt=""
            @click.stop="authentication"
          />
          <img
            v-else
            class="attestation"
            src="@/assets/image/attestation2.png"
            alt=""
            @click.stop="authentication"
          />
          <div>
            <span
              v-if="Number(info.data.auth) === 1"
              @click.stop="authentication"
              >已认证</span
            >
            <span v-else @click.stop="authentication">未认证</span>
          </div>
        </div>
        <div class="info">
          <div>{{ info.data.username }}</div>
          <div style="margin-top: 10px">
            邀请码：{{ info.data.code }}
            <span
              v-clipboard:copy="info.data.code"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              >复制邀请码</span
            >
          </div>
        </div>
        <div class="setUp">
          <img
            src="@/assets/image/setUp.png"
            width="20"
            height="20"
            alt=""
            @click="setUpFn"
          />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="profit">
        <div class="money">
          <span>￥ {{ info.data.account }}</span>
          <div>我的收益</div>
        </div>
        <div class="buttonDiv">
          <div class="proButton" @click="recharge">充 值</div>
          <div class="proButton" style="margin-left: 20px" @click="profitFn">
            提 现
          </div>
        </div>
      </div>
      <div class="column">
        <div
          class="list"
          v-for="(item, index) in info.column"
          :key="index"
          @click="navGetTo(item)"
        >
          <img :src="item.icon" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="secede" @click="secedeFn">退 出 登 录</div>
  </div>
  <van-popup
    v-model:show="show"
    @click-overlay="clickOverlay"
    style="width: 80%; background-color: var(--backColor)"
  >
    <Popup :payType="2" @onRmove="onRmove" />
  </van-popup>
</template>

<script>
import {
  defineComponent,
  reactive,
  getCurrentInstance,
  onMounted,
  ref,
  provide,
} from "vue";
import { useRouter } from "vue-router";
import { setUpload, getInfo, setAvatar, imgUrl } from "../../api/http.js";
import myicon1 from "@/assets/image/myicon1.png";
import myicon2 from "@/assets/image/myicon2.png";
import myicon3 from "@/assets/image/myicon3.png";
import myicon4 from "@/assets/image/myicon4.png";
import myicon5 from "@/assets/image/myicon5.png";
import myicon6 from "@/assets/image/myicon6.png";
import myicon7 from "@/assets/image/myicon7.png";
import myicon8 from "@/assets/image/myicon8.png";
import Popup from "@/components/Popup.vue";
// import QRCode from "qrcodejs2";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const info = reactive({
      column: [
        {
          icon: myicon1,
          title: "买入订单",
          router: "/purchase",
        },
        {
          icon: myicon2,
          title: "卖出记录",
          router: "/myGoods",
        },
        {
          icon: myicon3,
          title: "收付款设置",
          router: "/collectPayMoney",
        },
        {
          icon: myicon4,
          title: "收益明细",
          router: "/profit",
        },
        {
          icon: myicon5,
          title: "我的团队",
          router: "/team",
        },
        {
          icon: myicon6,
          title: "生成海报",
          router: "/poster",
        },
        {
          icon: myicon7,
          title: "收货地址",
          router: "/address",
        },
        {
          icon: myicon8,
          title: "用户须知",
          router: "/notice",
        },
      ],
      data: {},
    });
    const getUserInfo = async () => {
      const data = await getInfo();
      if (data.code == 500) {
        proxy.$toast.fail(data.msg);
        router.push({
          name: "Login",
        });
        return;
      }
      localStorage.setItem("info", JSON.stringify(data.data));
      info.data = data.data;
      console.log(info.data);
    };

    onMounted(() => {
      getUserInfo();
    });

    const profitFn = () => {
      console.log("提现");
      router.push({
        path: "/profit",
      });
    };
    const show = ref(false);
    const onRmove = () => {
      console.log("取消");
      show.value = false;
      getInfo();
    };
    const recharge = () => {
      show.value = true;
      console.log("充值");
    };
    const overlayBool = ref(false);
    provide("overlay", overlayBool);
    const clickOverlay = () => {
      overlayBool.value = true;
    };

    const router = useRouter();
    const navGetTo = (item) => {
      console.log(item);
      router.push({
        path: item.router,
      });
    };
    const secedeFn = () => {
      proxy.$toast.success("您已退出登录");
      localStorage.clear();
      router.push({
        path: "/login",
      });
    };
    const setUpFn = () => {
      console.log("设置");
      router.push({
        path: "/setUp",
      });
    };
    const authentication = () => {
      router.push({
        path: "/bankCard",
        query: {
          auth: Number(info.data.auth),
        },
      });
    };
    const onCopy = () => {
      proxy.$toast.success("复制成功");
    };
    const onError = () => {
      proxy.$toast.fail("复制失败");
    };
    const afterRead = async (file) => {
      // faceImg.value = file.content;
      let param = new FormData();
      param.append("file", file.file);
      const data = await setUpload(param);
      if (data.code !== 200) return proxy.$toast.fail("图片上传失败");

      const avatar = await setAvatar({ avatar: data.data });
      avatar.code === 200
        ? proxy.$toast.success("头像更改成功")
        : proxy.$toast.fail("头像更改失败");

      info.data.avatar = data.data;
    };
    return {
      profitFn,
      recharge,
      info,
      navGetTo,
      secedeFn,
      setUpFn,
      onCopy,
      afterRead,
      onError,
      authentication,
      imgUrl,
      onRmove,
      show,
      clickOverlay,
    };
  },
  components: {
    Popup,
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: calc(100vh - 50px);
  background-color: #f1f0eb;
  .title {
    width: 100%;
    min-height: 180px;
    background-image: url(../../assets/image/my.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
    background-color: #f1f0eb;

    .titleText {
      width: 100%;
      height: 60px;
      font-size: 1.125rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #444444;
      background-color: #f1f0eb;
      text-align: center;
      line-height: 60px;
    }

    .userInfo {
      width: 100%;
      padding: 0 4%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .face {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        padding: 3px;
        background-color: #fff;
        position: relative;

        .attestation {
          width: 25px;
          height: 25px;
          position: absolute;
          right: 0;
          bottom: 0;
        }
        span {
          display: block;
          width: 100%;
          font-size: 0.9rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          text-align: center;
          margin-top: 5px;
        }
      }

      .info {
        div {
          font-size: 1rem;
          font-family: PingFang SC;
          font-weight: 700;
          color: #444444;

          span {
            font-size: 0.9rem;
            font-family: PingFang SC;
            font-weight: 400;
            text-decoration: underline;
            color: #444444;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    padding: 0 4%;
    .profit {
      width: 100%;
      padding: 15px 4%;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;

      .money {
        span {
          font-size: 1.25rem;
          font-family: PingFang SC;
          font-weight: 700;
          color: #d91111;
        }
        div {
          margin-top: 10px;
          font-size: 0.625rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }

      .buttonDiv {
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .proButton {
          width: 70px;
          background: #ffffff;
          border: 1px solid #f8a300;
          border-radius: 30px;
          font-size: 0.9rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #f8a300;
          text-align: center;
          padding: 8px 0;
        }
      }
    }

    .column {
      width: 100%;
      padding: 10px 4%;
      margin-top: 5px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;

      .list {
        width: 25%;
        text-align: center;
        padding: 20px 0;

        img {
          // width: 40px;
          height: 20px;
        }

        div {
          margin-top: 10px;
          font-size: 0.8rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #444444;
        }
      }
    }
  }
  .secede {
    width: 70%;
    height: 45px;
    background: #f6f5f0;
    border: 1px solid var(--textColorTwo);
    border-radius: 50px;
    font-size: 1.1rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: var(--textColorTwo);
    text-align: center;
    position: absolute;
    bottom: 80px;
    left: 15%;
    line-height: 45px;
  }
}
</style>
